
// table
@alarm-color: #fe7b1b;
@danger-color: #fc4242;
@table-color: #2d2d2d;
@table-header-color: #1b86fe;
@table-header-background: #ddecfa;
@table-header-active-background: #b5d6f4;
@table-border-color: #d1d1d1;
@table-header-border-color: #fff;
@table-font-size: 14px;
@table-header-font-size: 18px;
@table-header-font-weight: bold;
@table-ceil-padding-left: 12px;
@table-ceil-padding-right: 12px;

/* tag 组件 */
.ant-pro-tag-select {
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;

  -ms-flex-wrap: wrap;
}

.ant-popover {
  &.width-full {
    width: 100%;
  }
}

/* 超出一行省略 */
.over-ellipsis-lines(@line) {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: @line;
  line-clamp: @line;
}

.over-ellipsis-line-1 {
  .over-ellipsis-lines(1);
}

.over-ellipsis-line-6 {
  .over-ellipsis-lines(6);
}

/* 超出两行省略 */
.over-ellipsis-line-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: -o-ellipsis-lastline;
  text-overflow: ellipsis;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 回到顶部 样式 */
#back-to-top {
  right: 10px !important;
  bottom: 80px !important;
  display: -webkit-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  background-color: rgba(256, 256, 256, 0.4);
  box-shadow: @box-shadow-base;
  border-radius: 25%;
  transform: scale(1) !important;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

  -webkit-box-align: center;
  -webkit-box-pack: center;
  -webkit-box-shadow: @box-shadow-base;
  -ms-flex-align: center;
  -ms-flex-pack: center;
  -webkit-transform: scale(1) !important;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;

  &:hover {
    background-color: rgba(256, 256, 256, 0.8);
    transform: scale(1.1) !important;

    -webkit-transform: scale(1.1) !important;
  }
}

/* 选项 选中效果 */
.item-selected {
  border: 1px solid @blue-6;
}

/* 列表单项悬停效果 */
.item-hover {
  box-sizing: border-box;
  background: #fafafa;
  box-shadow: @noshadow;
  -webkit-transition: box-shadow 0.1s, background 0.1s;
  transition: box-shadow 0.1s, background 0.1s;

  -webkit-box-shadow: @noshadow;
  -webkit-box-sizing: border-box;
  -webkit-transition: background 0.1s, -webkit-box-shadow 0.1s;

  &:hover {
    position: relative;
    z-index: 1;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }
}

/* pageview + a-card 布局效果 */
.page-view {
  overflow: hidden;

  .page-header {
    padding: 1px 48px 0 !important;
    box-shadow: @shadow-1-down;

    -webkit-box-shadow: @shadow-1-down;

    .s-breadcrumb {
      margin-top: 16px;
      margin-bottom: 16px;
      padding-bottom: 0px !important;
    }

    .title {
      margin-left: 0 !important;
      margin-top: 16px;
      font-weight: 600 !important;
    }
  }

  .content {
    background: unset !important;
    margin-top: 12px !important;
  }
}

.s-card {
  overflow: hidden;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  background: #fff !important;
  box-shadow: @card-shadow;
  border-radius: 10px !important;

  &.font-size-14 {
    * {
      font-size: 14px;
    }
  }

  &.line-height-fix {
    line-height: initial;
  }

  &.row-margin {
    .ant-row {
      margin: 10px 24px !important;
    }
  }

  &.no-padding {
    .ant-card-body {
      padding: 0 !important;
    }
  }

  &.overflow-unset {
    overflow: unset !important;
  }

  &.color-black {
    color: #000 !important;
  }

  // box-shadow: @box-shadow-base;

  -webkit-box-shadow: @card-shadow;

  /deep/ .pagination-container.table-wrapper {
    margin-top: 0 !important;
  }
}

.s-card-shadow {
  box-shadow: @card-shadow;

  -webkit-box-shadow: @card-shadow;
}

.table-container {
  white-space: nowrap;

  .ant-card-body {
    padding: 0;

    tr {
      td {
        white-space: initial;
      }
    }
  }
}

/* 分页器 */
.pagination-container {
  margin: 12px 0;

  .ant-pagination {
    width: 100%;
    padding: 12px 24px;
    margin: 0;
    text-align: right;

    li:first-of-type {
      float: left;
    }

    li:last-of-type {
      margin-left: 40px;
    }
  }
}

/* 图标按钮 */
.s-icon (@color: #666, @hover-color: #333) {
  padding: 0 6px;
  color: @color  !important;

  &:focus,
  &:visited,
  &:active,
  &:hover {
    color: @hover-color;
    transform: scale(1.5);
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;

    -webkit-transform: scale(1.5);
    -webkit-transition: -webkit-transform 0.3s;
  }
}

.danger-icon {
  .s-icon(@red-6, @red-5);
}

.primary-icon {
  .s-icon(@blue-6, @blue-5);
}

.success-icon {
  .s-icon(@green-7, @green-6);
}

.alarm-icon {
  .s-icon(@orange-6, @orange-5);
}

/* 块状按钮 */
.s-btn (@bgc: #fafafa, @hover-bgc : #fff) {
  color: #fff !important;
  background-color: @bgc  !important;
  border: 1px solid transparent !important;
  user-select: none !important;

  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  &.icon-btn {
    color: @bgc  !important;
    background-color: transparent !important;
    border-color: transparent !important;
  }

  &:focus,
  &:visited,
  &:active,
  &:hover {
    color: #fff !important;
    background-color: @hover-bgc  !important;
    box-shadow: @box-shadow-base  !important;
    border-color: @bgc  !important;

    -webkit-box-shadow: @box-shadow-base  !important;

    &.icon-btn {
      color: @hover-bgc  !important;
      background-color: transparent !important;
      border-color: @bgc  !important;
    }
  }
}

.danger-btn {
  .s-btn(@red-6, @red-5);
}

.primary-btn {
  .s-btn(@blue-6, @blue-5);
}

.success-btn {
  .s-btn(@green-7, @green-6);
}

.alarm-btn {
  .s-btn(@orange-6, @orange-5);
}

.danger-btn-border {
  .s-border(@red-6, @red-4);
}

.primary-btn-border {
  .s-border(@blue-6, @blue-4);
}

.success-btn-border {
  .s-border(@green-7, @green-5);
}

.alarm-btn-border {
  .s-border(@orange-6, @orange-4);
}

.s-border(@color: #333, @hover-color: #666) {
  padding: 0 12px;
  color: @color  !important;
  cursor: pointer;
  user-select: none !important;
  border-color: @color  !important;

  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  &:hover {
    color: @hover-color  !important;
    border-color: @hover-color  !important;
    /*
    color: #fcfcfc !important;
    text-shadow: -1px -1px 0 @hover-color, -1px 1px 0 @hover-color,
      1px -1px 0 @hover-color, 1px 1px 0 @hover-color, -1px 0 0 @hover-color,
      1px 0 0 @hover-color, 0 -1px 0 @hover-color, 0 1px 0 @hover-color;
    */
  }

}

/* 提升 disabled 按钮样式权重 */
.ant-btn[disabled] {
  color: rgba(0, 0, 0, 0.25) !important;
  background-color: #f5f5f5 !important;
  border-color: rgba(0, 0, 0, 0.1) !important;

  &:hover {
    color: rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.2) !important;
  }
}

.ant-btn-sm {
  padding: 0 7px !important;
}

/* 字符按钮 */
.s-link (@color: #333, @hover-color : #666) {
  padding: 0 12px;
  color: @color  !important;
  cursor: pointer;
  user-select: none !important;

  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;

  white-space: nowrap;

  &:hover {
    color: @hover-color  !important;
    border-color: @hover-color  !important;
    /*
    color: #fcfcfc !important;
    text-shadow: -1px -1px 0 @hover-color, -1px 1px 0 @hover-color,
      1px -1px 0 @hover-color, 1px 1px 0 @hover-color, -1px 0 0 @hover-color,
      1px 0 0 @hover-color, 0 -1px 0 @hover-color, 0 1px 0 @hover-color;
    */
  }

  &.no-padding {
    padding: 0 !important;
  }

  &.no-hover {
    cursor: auto !important;
  }
}

.primary-link {
  .s-link(@blue-6, @blue-4);
}

.danger-link {
  .s-link(@red-6, @red-4);
}

.success-link {
  .s-link(@green-7, @green-5);
}

.disabled-link {
  .s-link(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.5));
}

/* 级联选择框 ， 下拉选择框 ， 滚动条 */
.ant-select-dropdown,
.ant-cascader-menus {
  user-select: none;

  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;

  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 5px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
    border-left: 0;
    border-radius: 0;
  }
}

/* fixedHeader 时 ， 固定 导航栏下的 submenu */
.body-fixedHeader {
  &>div>div>div.ant-menu-submenu {
    top: 71px !important;

    &>ul.ant-menu {
      position: fixed !important;
    }
  }
}

/* 修改导航栏的宽度，使得全部导航栏显示出来 */
.layout.ant-layout .top-nav-header-index .header-index-wide .header-index-left {
  flex: 1 0 80% !important;

  -webkit-box-flex: 1 !important;
  -ms-flex: 1 0 80% !important;
}

.layout.ant-layout .top-nav-header-index .header-index-wide .ant-menu.ant-menu-horizontal {
  flex: 1 1 1200px !important;
  max-width: 1200px !important;

  -webkit-box-flex: 1 !important;
  -ms-flex: 1 1 1200px !important;
}

/* 进度条 */
.finish {
  .ant-progress-bg {
    /* Safari 5.1 - 6.0 */
    /* Opera 11.1 - 12.0 */
    /* Firefox 3.6 - 15 */
    background: -webkit-gradient(linear, left top, right top, from(#6fc58c), to(#b3ecc6)) !important;
    background: linear-gradient(to right, #6fc58c, #b3ecc6) !important;
  }
}

.noFinish {
  .ant-progress-bg {
    /* Safari 5.1 - 6.0 */
    /* Opera 11.1 - 12.0 */
    /* Firefox 3.6 - 15 */
    background: -webkit-gradient(linear, left top, right top, from(#298afb), to(#7ebaff)) !important;
    background: linear-gradient(to right, #298afb, #7ebaff) !important;
  }
}

/* 搜索栏 */
.filter {
  margin-bottom: 20px;

  .ant-card-body {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /deep/ .table-page-search-submitButtons,
  /deep/ .ant-row.ant-form-item {
    margin-bottom: 4px !important;
  }

  .ant-row {
    .ant-form-item {
      display: -webkit-box !important;
      display: flex !important;
      margin-right: 24px;
  
      .ant-form-item-label {
        width: 70px;
  
        label {
          width: 100%;
          display: inline-block;
          text-align: justify;
          -moz-text-align-last: justify;
          text-align-last: justify;
          position: relative;
          padding-right: 14px;
  
          &::after {
            position: absolute;
            right: 0;
          }
        }
      }

      &.label-width-auto {
        .ant-form-item-label {
          width: auto;
        }
      }
  
      .ant-form-item-control-wrapper {
        flex: 1 !important;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        -webkit-box-align: center;
        align-items: center;
  
        .ant-form-item-control {
  
          &,
          .ant-form-item-children {
            display: -webkit-box;
            display: flex;
            -webkit-box-align: center;
            align-items: center;
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    >div {
      &:last-of-type {
        .ant-form-item {
          margin-right: 0;
        }
      }
    }
  }

  .ant-calendar-picker {
    width: 100% !important;
  }

  .antd-pro-components-standard-form-row-index-standardFormRow {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .button-container {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;

    &.other-line {
      display: -webkit-box;
      display: flex;
      justify-content: space-around;
      width: 30%;
      margin-top: 20px;
      margin-bottom: -5px;
    }
  }

  .btn-container {
    height: 39px;
    line-height: 39px;

    &.align-right {
      margin-right: 24px;
      text-align: right;
    }
  }

  .antd-pro-components-standard-form-row-index-label {
    align-self: center;

    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
  }

  .ant-pro-tag-select .ant-tag {
    padding: 0 8px;
    margin-right: 12px;
    font-size: 14px;
  }
}

//内页的面包屑
.ant-breadcrumb {
  padding-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .ant-breadcrumb-link {
    cursor: pointer;
  }
}

/* STitle 拓展 */
.list-title {
  margin: 0 24px;
  padding-top: 24px;
}

/* 隱藏 date-picker 快捷选项 */
.date-picker {
  /deep/ .ant-calendar-today-btn {
    display: none !important;
  }
}

// ant table
.ant-table table {
  border-collapse: separate;
  border-spacing: 0;

  .ant-table-thead {
    >tr {
      >th {
        border-top: 1px solid #e8e8e8;

        &:first-of-type {
          border-left: 1px solid #e8e8e8;
        }

        &:last-of-type {
          border-right: 1px solid #e8e8e8;
        }
      }
    }
  }

  .action-container {
    .Flex;
    .Flex-center;
    
    &.start {
      .Flex-justify-start;
    }

    &.end {
      .Flex-justify-end;
    }

    &.between {
      .Flex-justify-spacebetween;
    }
  }

  span {
    &:first-of-type {
      padding-left: 0;
    }
    &:last-of-type {
      padding-right: 0;
    }
  }
}

/* table 样式 */
.s-table,
.ant-table {
  -webkit-user-select: initial;
     -moz-user-select: initial;
      -ms-user-select: initial;
          user-select: initial;

  .ant-table-content {
    .ant-table-placeholder {
      border-color: @table-border-color !important;
    }

    .ant-table-scroll,
    .ant-table-body {
      border-top: 1px solid @table-border-color !important;
      border-right: 1px solid @table-border-color !important;
      border-left: 1px solid @table-border-color !important;
      border-bottom: none !important;
      border-radius: 4px !important;

      table {
        border: none !important;
      }

      .ant-table-thead {
        tr {
          background: @table-header-background !important;

          th {
            padding-left: @table-ceil-padding-right !important;
            padding-right: @table-ceil-padding-right !important;
            border-right-color: @table-header-border-color !important;
            border-bottom-color: @table-border-color !important;
            background: @table-header-background !important;
            color: @table-header-color !important;
            font-size: @table-header-font-size !important;
            font-weight: @table-header-font-weight !important;
  
            &:last-of-type {
              border-right-color: @table-header-background !important;
            }
  
            &:hover {
              background: @table-header-active-background !important;
            }
          }
        }
      }

      .ant-table-tbody {
        tr {
          td {
            padding-left: @table-ceil-padding-right !important;
            padding-right: @table-ceil-padding-right !important;
            border-color: @table-border-color !important;
            font-size: @table-font-size !important;
            color: @table-color !important;

            &:last-of-type {
              border-right: none !important;
            }
          }

          &:last-of-type {
            td {
              &:first-of-type {
                border-bottom-left-radius: 4px !important;
              }

              &:last-of-type {
                border-bottom-right-radius: 4px !important;
              }
            }
          }
        }
      }
    }

    .ant-table-scroll {
      .ant-table-header {
        background: @table-header-background !important;
      }

      .ant-table-body {
        border: none !important;
      }
    }
  }
}

.footer-table {
  scrollbar-color: transparent;

  ::-webkit-scrollbar-thumb {
    background: transparent;
  }
}


/* modal 样式 */
.ant-modal {
  .ant-modal-content {
    .ant-modal-body {
      max-height: 80vh;
      overflow-y: auto;
    }
  }
}